<template>
	<!-- 	px-2 py-1 border d-inline-block m-1 -->
	<view  class="d-inline-block  m-1  px-2 py-1  border"  :style="getStyle">
		  {{item.name}}
	</view>
	
</template>

<script>
	export  default  {
		props:{
			item:{
				type:Object
			}
		},
		computed:{
			getStyle() {	
				let color = {
					borderColor: ['#EEA6AA', '#DD6A4B', '#98D5D8', '#9DBE93', '#BCCD99'],
					background: ['#F8EAE9', '#FFBEC6', '#E8F6F6', '#E4F5E2', '#F2F6E8']
				}
				  let borderIndex=  Math.floor(Math.random()*(color.borderColor.length))  
				  let backgroundColorIndex= Math.floor(Math.random()*(color.background.length))  
				  console.log(borderIndex)
				    console.log(backgroundColorIndex)
				let borderColor=color.borderColor[borderIndex]
				let backgroundColor=color.background[backgroundColorIndex]
				return  ` border: 1px solid ${borderColor}; background-color: ${backgroundColor}; `	
			}	
		}	
	}
</script>

<style>
</style>
